<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="${wechatres}/css/lib/mui.min.css">
	<link rel="stylesheet" href="${wechatres}/css/common/base.css"/>
	<!--App自定义的css-->
	<link rel="stylesheet" type="text/css" href="${wechatres}/css/lib/app.css" />
	<link rel="stylesheet" href="${wechatres}/css/module/icon.css" />
	<link rel="stylesheet" href="${wechatres}/css/module/drag.css" />
	<link rel="stylesheet" href="${wechatres}/css/module/personal.css" />
	<link rel="stylesheet" href="${wechatres}/css/module/personmsg.css" />
	<script src="${wechatres}/script/libs/jquery-1.11.1.js"></script>
	<script src="${wechatres}/script/plugs/mui.min.js"></script>
	<script src="${wechatres}/script/plugs/mui.view.js"></script>
	<script src="${wechatres}/script/views/common.js"></script>
    <title>个人中心</title>	
    <script type="text/javascript">
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   			
   		});
   		var count = 0;
   		function searchFamily(method){
   			var userId = "${user.userId}";
   			if(method == '+'){
   				count++;
   			}else{
   				count--;
   			}
   			if(count < 0){
   				count = 0;
   				return;
   			}
   			$.get('${URL_WECHAT_SEARCHFAMILY}',
   					{
   						userId:userId,
   						count:count
   					},
   					function(data,status){
   						if(data.success == true){
   							if(data.data.userImage == null){
   							 	$("#family_userImage").attr("src","${wechatres}/img/img_user_initial.png");
   							}else{
   								$("#family_userImage").attr("src","data:image/png;base64,"+data.data.userImage);
   							}
   							$("#family_realname").html(data.data.realname);	
							if(data.data.gender == "1"){
								$("#sex").html('<h4 class="sexTitle">性别</h4><p class="male">男</p>');
							}else if(data.data.gender == "2"){
								$("#sex").html('<h4 class="sexTitle">性别</h4><p class="sexContent">女</p>');
							}   							
   							$("#family_height").html(data.data.height);	
   							$("#family_idCard").html(data.data.idCard);	
   						}else{
   							count--;
   						}
   					});
   		}
    </script>
</head>
<body>
	<div >
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar"  style="height: 0">
				</div>
				
				<div class="mui-pages" style="top: 0">
					
				</div>
			</div>
		</div>
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner">
				<!-- <header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-left mui-btn-nav mui-pull-left"><i>返回</i></a>
					<h1 class="mui-title mui-center">个人中心</h1>
				</header> -->
			</div> 
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="personalBg">
						<img src="${wechatres}/img/personal_bg.png" alt="" />
						<div class="message">
							<div class="portrait">
								<img src="data:image/png;base64,${user.userImage}"></img>
							 </div>
							<div class="personName">
								<h4>${user.realname}</h4>
								<!-- <p>还未绑定账号</p> -->
							</div>
						</div>
					</div>
					<div class="mui-scroll">
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="#msgContent" class="mui-navigate-right">个人信息</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#myFamily" class="mui-navigate-right">我的家庭</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#aboutUs" class="mui-navigate-right">关于我们</a>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell exit" style="text-align: center;">
								<a href="${URL_WECHAT_LOGOUT}">退出登录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active hardware" href="${URL_WECHAT_TOMAIN}">
				<span class="mui-icon hardwareData"></span>
				<span class="mui-tab-label">健康数据</span>
			</a>
			<a class="mui-tab-item smartExam" href="tab-webview-subpage-about.html">
				<span class="mui-icon smartExaming"></span>
				<span class="mui-tab-label">智能导诊</span>
			</a>
			<a class="mui-tab-item personCenter" href="${URL_WECHAT_TOPERSONAL}">
				<span class="mui-icon personal act2"></span>
				<span class="mui-tab-label cur">个人中心</span>
			</a>
		</nav>
			<!--页面主内容区结束-->	
		<div id="msgContent" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-left mui-btn-nav mui-pull-left"><i>返回</i></a>
					<h1 class="mui-title mui-center">个人信息</h1>
				</header>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper mui-bg">
					<div class="mui-scroll mui-bg">
						<ul class="personalCenterTxt">
							<li>
								<h4 class="nameTitle">姓名</h4>
								<p class="nameContent">${user.realname}</p>
							</li>
							<li>
								<h4 class="sexTitle">性别</h4>
								<p class="male" <c:choose>
								<c:when test="${user.gender==2}">hidden="true"</c:when>
								<c:when test="${user.gender==1}"></c:when>
								</c:choose>>男</p>
								<p class="sexContent" <c:choose>
								<c:when test="${user.gender==1}">hidden="true"</c:when>
								<c:when test="${user.gender==2}"></c:when>
								</c:choose>>女</p>
							</li>
							<li>
								<h4 class="heightTitle">身高(cm)</h4>
								<p class="heightContent">${user.height}</p>
							</li>
							<li>
								<h4 class="weightTitle">体重(kg)</h4>
								<p class="weightContent">${user.weight}</p>
							</li>
							<li>
								<h4 class="idcardTitle">身份证号</h4>
								<p class="idContent">${user.idCard}</p>
							</li>
							<li>
								<h4 class="healthTitle">医保号</h4>
								<p class="healthContent">${user.medicalInsuranceNum}</p>
							</li>
						</ul>
						
					</div>
				</div>
			</div>
		</div>
		<!--我的家庭部分-->
		<div id="myFamily" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-left mui-btn-nav mui-pull-left"><i>返回</i></a>
					<h1 class="mui-title mui-center">我的家庭</h1>
				</header>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper mui-bg">
					<div class="mui-scroll mui-bg">
						<div class="potrait">
							<a class="left_btn" onclick="searchFamily('-')"></a>
							<a class="right_btn" onclick="searchFamily('+')"></a>
							<img src="data:image/png;base64,${family.userImage}" class="user" id="family_userImage" />
							<h3>${family.username}</h3>
						</div>
						<ul class="personalCenterTxt">
							<li>
								<h4 class="nameTitle">姓名</h4>
								<p class="nameContent" id="family_realname">${family.realname}</p>
							</li>
							<li id="sex">
								<h4 class="sexTitle">性别</h4>
								<p class="male" <c:choose>
								<c:when test="${family.gender==2}">hidden="true"</c:when>
								<c:when test="${family.gender==1}"></c:when>
								</c:choose>>男</p>
								<p class="sexContent" <c:choose>
								<c:when test="${family.gender==1}">hidden="true"</c:when>
								<c:when test="${family.gender==2}"></c:when>
								</c:choose>>女</p>
							</li>
							<li>
								<h4 class="heightTitle">身高(cm)</h4>
								<p class="heightContent" id="family_height">${family.height}</p>
							</li>
							<li>
								<h4 class="idcardTitle">身份证号</h4>
								<p class="idContent" id="family_idCard">${family.idCard}</p>
							</li>
						</ul>
						
					</div>
				</div>
			</div>
		</div>
		<!--关于我们部分-->
		<div id="aboutUs" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-left mui-btn-nav mui-pull-left"><i>返回</i></a>
					<h1 class="mui-title mui-center">关于我们</h1>
				</header>
			</div>
			<div class="mui-page-content">
				<div style="padding-top:45px;">
					<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;美康生物是一家专业从事医学诊断产品研发、生产、销售及服务的国家高新技术企业，全国卫生产业企业先进单位。公司创立于2003年，矗立于中国东海之滨—宁波，2015年在深交所创业板成功上市，股票代码300439。</p>
				</div>
			</div>
		</div>
	</div>

<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#setting'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
			//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
			view.addEventListener('pageBeforeShow', function(e) {
				//				console.log(e.detail.page.id + ' beforeShow');
			});
			view.addEventListener('pageShow', function(e) {
				//				console.log(e.detail.page.id + ' show');
			});
			view.addEventListener('pageBeforeBack', function(e) {
				//				console.log(e.detail.page.id + ' beforeBack');
			});
			view.addEventListener('pageBack', function(e) {
				//				console.log(e.detail.page.id + ' back');
			});
		})(mui);
		
	</script>
</body>

</html>